<template>
	<el-container :style="{ height: '70vh' }">
		<el-header><Logo></Logo></el-header>
		<el-main class="curMain">
			<el-card :body-style="{ padding: '10px' }">
				<MapTitle></MapTitle>
				<div style="padding: 5px">
					<div class="bottom">
						<el-row :style="{ width: '100%' }">
							<el-col :span="4" style="align-items:end;"><MapLogo></MapLogo></el-col>
							<el-col :span="20">
								<el-form class="loginform" :model="form" label-width="70px" status-icon :action="form.authServer" method="post">
									<el-form-item label="登录名"><el-input v-model="form.username" name="username" placeholder="请输入手机号" /></el-form-item>
									<el-form-item label="密码">
										<el-input v-model="form.password" name="password" placeholder="请输入密码" type="password" autocomplete="off" />
									</el-form-item>
									<el-form-item label="验证码">
										<el-row >
											<el-col :span="6">
												<el-input v-model="form.checkCode" name="checkCode" placeholder="请输入验证码" autocomplete="off" />
											</el-col>
											<el-col :span="4">
												<el-image ref="verifyCodeImg"
													style="width: 130px;height: 40px;cursor: pointer;"
													:initial-index="100"
													:src="form.verifyCodeUrl"
													:fit="cover"
													@click="changeCheckCode()"
												/>
											</el-col>
											<el-col :span="14" >
												<span :textContent="form.message" style="color: red;"></span>
											</el-col>
										</el-row>
										
									</el-form-item>
									<el-form-item>
										<el-checkbox label="记住我" name="rememberme" v-model="form.rememberme" />
										<el-button type="primary" :disabled="form.submitDisable" @click="toAuth" style="margin-left:80px;">确定</el-button>
										<el-button type="warning"  @click="getUserInfo" style="margin-left:20px;">获取用户信息</el-button>
									</el-form-item>
								</el-form>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-card>
		</el-main>
	</el-container>
</template>
<script setup lang="ts">
import Logo from '@components/logosvg.vue';
import MapLogo from '@components/maplogosvg.vue';
import MapTitle from '@components/maptitlesvg.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { AuServerUtil } from '@/util/auth/au_server_util';
import { UserServerUtil } from '@/util/entity/user_util';
import { SignUtil } from '@/util/signin';
import { useRoute } from 'vue-router';
import { ref, reactive, onBeforeMount } from 'vue';
import Cookies from 'js-cookie';
const route = useRoute();
const emit = defineEmits(['onChangeRoute']);
const params = route.query;
const verifyCodeImg=ref();
const form = reactive({
	username: '',
	password: '',
	checkCode:'',
	verifyCodeUrl:'/authServer/getCodeJpg',
	message:'',
	csrf: {
		headerName: '',
		parameterName: '',
		token: ''
	},
	rememberme: true,
	submitDisable: false
});
onBeforeMount(async () => {
	//let _csrf = await AuServerUtil.fetch_csrf_token();
	//Object.assign(form.csrf, _csrf);
	//console.log(form.csrf);
});
//图片点击事件
  function changeCheckCode() {
	  form.verifyCodeUrl="/authServer/getCodeJpg?"+new Date().getTime();
      //拼接时间，是为了可以一直刷新验证码，也可以用其他随机数
  }
const authSuccess = (loginName,resData) => {
	
	Cookies.set('session_id', resData.sessionid);
	Cookies.set('sessionId', resData.sessionid);
	Cookies.set('JSESSIONID', resData.sessionid);
	let _user = resData.user; //获取服务端返回的用户登录信息
	if (_user) {
		_user['loginName']=loginName;
		SignUtil.setSignin(_user, resData.signinTime);
		AuServerUtil.toGetCode(
			form,
			code => {
				console.log('成功获取授权码：' + code);
				form['code'] = code;
				AuServerUtil.toGetToken(
					form,
					token => {
						console.log('成功获取token:');
						console.log(token);
						SignUtil.refreshToken(token);
						let _userId=SignUtil.getUserId();
						UserServerUtil.saveUserLoginInfor();
					},
					tokenError => {
						console.log('获取token失败:');
						console.log(tokenError);
					}
				);
			},
			codeUrl => {
				console.log('获取授权码失败：' + codeUrl);
			}
		);
	}

	//emit('onChangeRoute', 'success', query, true);
};
const authFailed = resData => {
	form.message=resData['msg'];
};
const toAuth = async () => {
	SignUtil.clearUser(); //清除之前的痕迹
	AuServerUtil.toAuth(form, authSuccess, authFailed);
};
const getUserInfo = async () => {
	emit('onChangeRoute', 'userinfo', {}, true);
};
</script>
<style>
.curMain {
	--el-main-padding: 0px;
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.loginform {
	max-width: 660px;
}
.curFoot {
	/**底部宽度*/
	width: 100%;
	padding: 0px;
	bottom: 0px;
}
</style>
